import { useAppDispatch, useAppSelector } from '../../app/hooks'
import { setVisibleToTrue, order, active, toggleActive, toggleOrder } from '../../features/around/AroundSlice'
import { Active } from '../../myTypes'
import style from './filterNav.module.css'

export default function FilterNav() {
  const dispatch = useAppDispatch()
  // orderString用于控制导航图标
  const orderString = useAppSelector(order)
  // curActive用于控制导航项是否激活
  const curActive = useAppSelector(active)

  function toggleDescAsc(setActiveValue: Active) {
    if (setActiveValue !== curActive) {
      dispatch(toggleActive(setActiveValue))
    }
    if ((setActiveValue === 'distance' || setActiveValue === 'grade' || setActiveValue === 'price') && setActiveValue === curActive) {
      if (orderString === 'asc') {
        dispatch(toggleOrder('desc'))
      } else {
        dispatch(toggleOrder('asc'))
      }
    }
  }

  return (
    <div className={style['nav-list']}>
      <div className={`${style['nav-item']} ${curActive === 'complex' && style.active}`} onClick={() => toggleDescAsc('complex')}>
        <span>综合</span>
      </div>
      <div className={`${style['nav-item']} ${curActive === 'distance' && style.active}`} onClick={() => toggleDescAsc('distance')}>
        <span>距离</span>
        <div className={style.icon}>
          {curActive !== 'distance' && <img src="/static/use/icon-orderType-1.png" alt="" />}
          {curActive === 'distance' && orderString === 'asc' && <img src="/static/use/icon-orderType-2.png" alt="" />}
          {curActive === 'distance' && orderString === 'desc' && <img src="/static/use/icon-orderType-3.png" alt="" />}
        </div>
      </div>
      <div className={`${style['nav-item']} ${curActive === 'grade' && style.active}`} onClick={() => toggleDescAsc('grade')}>
        <span>评分</span>
        <div className={style.icon}>
          {curActive !== 'grade' && <img src="/static/use/icon-orderType-1.png" alt="" />}
          {curActive === 'grade' && orderString === 'asc' && <img src="/static/use/icon-orderType-2.png" alt="" />}

          {curActive === 'grade' && orderString === 'desc' && <img src="/static/use/icon-orderType-3.png" alt="" />}
        </div>
      </div>
      <div className={`${style['nav-item']} ${curActive === 'price' && style.active}`} onClick={() => toggleDescAsc('price')}>
        <span>价格</span>
        <div className={style.icon}>
          {curActive !== 'price' && <img src="/static/use/icon-orderType-1.png" alt="" />}
          {curActive === 'price' && orderString === 'asc' && <img src="/static/use/icon-orderType-2.png" alt="" />}
          {curActive === 'price' && orderString === 'desc' && <img src="/static/use/icon-orderType-3.png" alt="" />}
        </div>
      </div>
      <div className={style['nav-item']} onClick={() => dispatch(setVisibleToTrue(true))}>
        <span>筛选</span>
        <div className={style['filter-icon']}>
          <img src="/static/use/icon-screen-9e9.png" alt="" />
        </div>
      </div>
    </div>
  )
}
